import {activityStrategyArmory} from "@/apis";

export function StrategyArmory() {
    const strategyArmoryHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const activityId = Number(queryParams.get('activityId'));
        if (!activityId){
            window.alert("请在请求地址中，配置 activityId 值，如：http://big-market.gaga.plus/?userId=xiaofuge&activityId=100301")
            return;
        }
        const res = await activityStrategyArmory(activityId);
        const {code, info} = await res.json();
        if (code != "0000") {
            window.alert("抽奖活动策略装配失败 code:" + code + " info:" + info)
            return;
        }

        window.alert("装配完成，开始体验吧!")
    }

    return (
        <button
            onClick={strategyArmoryHandle}
            className="px-12 py-1 mb-2 text-xl font-bold transition-all duration-300 transform
               rounded-2xl shadow-2xl hover:scale-105 active:scale-95
               bg-gradient-to-br from-blue-600 via-purple-500 to-cyan-400
               hover:bg-gradient-to-br hover:from-blue-500 hover:via-purple-400 hover:to-cyan-300
               relative overflow-hidden
               group  // 用于子元素联动
               border-2 border-white/20
               hover:shadow-[0_0_30px_-10px_rgba(96,165,250,0.5)]
               focus:outline-none focus:ring-4 focus:ring-cyan-300/70
               before:absolute before:inset-0
               before:bg-[linear-gradient(120deg,transparent_20%,rgba(255,255,255,0.15)_50%,transparent_80%)]
               before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-1000
               after:absolute after:inset-0
               after:bg-[radial-gradient(circle_at_center,_rgba(255,255,255,0.4)_0%,transparent_70%)]
               after:opacity-0 group-hover:after:opacity-100 after:transition-opacity after:duration-300"
            style={{backgroundSize: '200% 200%'}}
        >
            {/* 脉冲光圈特效 */}
            <div className="absolute -inset-1 rounded-2xl
                  animate-pulse-ring
                  border-2 border-cyan-300/30
                  opacity-0 group-hover:opacity-100
                  transition-opacity duration-500"/>

            <div className="relative z-10 flex items-center space-x-3">
                {/* 动态齿轮图标 */}
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="w-7 h-7 text-cyan-200 group-hover:rotate-180 transition-transform duration-700"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2.5"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                    />
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2.5"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                </svg>

                {/* 文字特效 */}
                <span className="text-transparent bg-clip-text
                        bg-gradient-to-r from-cyan-200 to-white
                        drop-shadow-[0_2px_4px_rgba(34,211,238,0.5)]
                        group-hover:drop-shadow-[0_4px_8px_rgba(34,211,238,0.7)]
                        transition-all duration-300">
                    <p>
                        装配活动抽奖配置 · 预热数据
                        <br/>
                        (温馨提醒：点击此按钮后方可参与活动哦❤️)
                    </p>
                </span>
            </div>
        </button>
    );
}
